<template>
  <a-layout style="min-height: 100vh">
    <a-layout-sider v-model:collapsed="collapsed" collapsible theme="light">
      <div class="logo" />
      <a-menu
        v-model:selectedKeys="current"
        theme="light"
        mode="inline"
        :items="items"
        @click="doMenuClick"
      >
      </a-menu>
    </a-layout-sider>
    <a-layout-content style="margin: 0 16px">
      <router-view></router-view>
    </a-layout-content>
  </a-layout>
</template>
<script lang="ts" setup>

import { computed, h, onMounted, ref } from 'vue'
import type { MenuProps } from 'ant-design-vue'
import { useRoute, useRouter } from 'vue-router'
const collapsed = ref<boolean>(false)
const current = ref<string[]>([])
const router = useRouter()

const doMenuClick = ({ key }: { key: string }) => {
  router.push({ path: key })
}

router.afterEach((to) => {
  current.value = [to.path]
})
const menuToRouteItem = (item: any) => {
  return {
    key: `${item.path}`,
    label: item.name,
    title: item.name,
    icon: h(item.meta?.icon),
  }
}
const route = useRoute()
const systemManagement = route.matched.find((r) => r.path === '/admin/system_management')
// 子路由
const subRoutes = systemManagement?.children || []

const originItems = computed(() => {
  return subRoutes.map(menuToRouteItem)
})
const items = ref<MenuProps['items']>(originItems)
onMounted(()=>{
  router.push('/admin/dashboard')
})
</script>
<style scoped>
#components-layout-demo-side .logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.site-layout .site-layout-background {
  background: #fff;
}
[data-theme='dark'] .site-layout .site-layout-background {
  background: #141414;
}
</style>
